<script setup lang="ts">
type NodeSolidBorderPropsType = {
  // 边框颜色
  color?: string
  // 内容区域背景在边框颜色的基础上的透明度
  bgOpacity?: number
  // 边框宽度
  borderWidth?: string | number
  // 边框圆角
  borderRadius?: string | number
}

import tinycolor2 from 'tinycolor2'
import { SizeUtil } from '@xtail/ui'

defineOptions({
  name: 'SNodeGradientDynamicBorder'
})

withDefaults(defineProps<NodeSolidBorderPropsType>(), {
  color: '#333',
  bgOpacity: 0.3,
  borderWidth: '2px',
  borderRadius: '0.25rem'
})
</script>

<template>
  <div
    class="s-node-solid-border flow-node-base"
    :style="{
      borderColor: color,
      borderWidth: SizeUtil.unitPreHandler(borderWidth),
      borderRadius: SizeUtil.unitPreHandler(borderRadius)
    }"
  >
    <div
      class="s-node-solid-border__content flow-node-base-padding"
      :style="{ backgroundColor: tinycolor2(color).setAlpha(bgOpacity).toRgbString() }"
    >
      <slot />
    </div>
  </div>
</template>

<style lang="scss">
@use '../styles/flow-node-base' as *;

.s-node-solid-border {
  box-sizing: border-box;
  border-style: solid;
}
</style>
